<template>
  <view class="salary-box">
    <u-navbar :title="title"></u-navbar>
    <view class="salary-box-inner">
      <u-card @click="toSalatyChildren(0,'底薪详情')"  :border="false">
        <view slot="head" style="">
          <view style="display: flex;align-items: center">
            <u-image :src="`${proxyUrl}/static/dixin.png`" mode="widthFix" width="50rpx"></u-image>
            <h2 style="width: 100%;text-align: center;display: flex;align-items: center;justify-content:space-between;padding-left:10rpx;">
              <text>底薪</text>
              <text style="font-size: 24rpx;color: #aaa;">点击查看详情</text>
            </h2>
          </view>
        </view>
        <view class="" slot="body">
          <view>
            <view style="padding-bottom: 20rpx;display: flex;align-items: center">

              责任底薪距离达成，完成单量还差 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">
              {{ calculateFunc(salaryInfo.basicAmountThreshold,salaryInfo.amount,'-') }}单</text>
            </view>
            <u-line-progress :active-color="calculateFunc3(salaryInfo.basicAmountThreshold,salaryInfo.amount)" :striped="true" :percent="calculateFunc2(salaryInfo.basicAmountThreshold,salaryInfo.amount)" :striped-active="true" ></u-line-progress>
          </view>
          <view>
            <view style="padding: 20rpx 0;display: flex;align-items: center">
              有效出勤还差 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ calculateFunc(salaryInfo.attendThreshold,salaryInfo.attend,'-') }}天</text>
            </view>
            <u-line-progress :active-color="calculateFunc3(salaryInfo.attendThreshold,salaryInfo.attend)" :striped="true" :percent="calculateFunc2(salaryInfo.attendThreshold,salaryInfo.attend)" :striped-active="true" ></u-line-progress>
          </view>
        </view>
      </u-card>
      <u-card @click="toSalatyChildren(1,'工龄奖详情')"  :border="false"   v-if="salaryInfo.workAgeAmountThreshold && salaryInfo.workAgeAmountThreshold != 0">
        <view slot="head" style="">
          <view style="display: flex;align-items: center">
            <u-image :src="`${proxyUrl}/static/dixin.png`" mode="widthFix" width="50rpx"></u-image>
            <h2 style="width: 100%;text-align: center;display: flex;align-items: center;justify-content:space-between;padding-left:10rpx;">
              <text>工龄奖</text>
              <text style="font-size: 24rpx;color: #aaa;">点击查看详情</text>
            </h2>
          </view>
        </view>
        <view class="" slot="body">
          <view v-if="salaryInfo.workAge >=3">
            <view style="padding-bottom: 20rpx;display: flex;align-items: center" >
              工龄奖距离达成，完成单量还差 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ calculateFunc(salaryInfo.workAgeAmountThreshold,salaryInfo.amount,'-') }}单</text>
            </view>
            <u-line-progress :active-color="calculateFunc3(salaryInfo.workAgeAmountThreshold,salaryInfo.amount)" :striped="true" :percent="calculateFunc2(salaryInfo.workAgeAmountThreshold,salaryInfo.amount)" :striped-active="true" ></u-line-progress>
          </view>
          <view v-else>
            <view style="padding-bottom: 20rpx;display: flex;align-items: center" >

              欢迎你的加入，距离获得工龄奖还有 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ calculateFunc(3,salaryInfo.workAge,'-') }}个月~</text>
            </view>
          </view>
          <view>
            <view style="padding: 20rpx 0;display: flex;align-items: center">
              工龄已满 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ salaryInfo.workAge }}个月</text>
            </view>
          </view>
        </view>
      </u-card>
      <u-card @click="toSalatyChildren(2,'全勤奖详情')"  :border="false">
        <view slot="head" style="">
          <view style="display: flex;align-items: center">
            <u-image :src="`${proxyUrl}/static/dixin.png`"  mode="widthFix" width="50rpx"></u-image>
            <h2 style="width: 100%;text-align: center;display: flex;align-items: center;justify-content:space-between;padding-left:10rpx;">
              <text>全勤奖</text>
              <text style="font-size: 24rpx;color: #aaa;">点击查看详情</text>
            </h2>
          </view>
        </view>
        <view class="" slot="body">
          <view>
            <view style="padding-bottom: 20rpx;display: flex;align-items: center">

              全勤奖距离达成，有效出勤还差 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ calculateFunc(salaryInfo.attendThreshold,salaryInfo.attend,'-') }}天</text>
            </view>
            <u-line-progress :active-color="calculateFunc3(salaryInfo.attendThreshold,salaryInfo.attend)" :striped="true" :percent="calculateFunc2(salaryInfo.attendThreshold,salaryInfo.attend)" :striped-active="true" ></u-line-progress>
          </view>
          <view>
            <view style="padding: 20rpx 0;display: flex;align-items: center">

              可非有效出勤容错剩余 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ calculateFunc(salaryInfo.restRemain,salaryInfo.rest<0?0:salaryInfo.rest,'-') }}天</text>
            </view>
            <!--            <u-line-progress :active-color="calculateFunc3(salaryInfo.attendThreshold,salaryInfo.attend)" :striped="true" :percent="calculateFunc2(salaryInfo.basicAmountThreshold,salaryInfo.amount)" :striped-active="true" ></u-line-progress>-->
          </view>
        </view>
      </u-card>
      <u-card v-if="salaryInfo.contributeAmountThreshold && salaryInfo.contributeAmountThreshold != 0" @click="toSalatyChildren(3,'特殊贡献奖详情')"  :border="false">
        <view slot="head" style="">
          <view style="display: flex;align-items: center">
            <u-image :src="`${proxyUrl}/static/dixin.png`" mode="widthFix" width="50rpx"></u-image>
            <h2 style="width: 100%;text-align: center;display: flex;align-items: center;justify-content:space-between;padding-left:10rpx;">
              <text>特殊贡献奖</text>
              <text style="font-size: 24rpx;color: #aaa;">点击查看详情</text>
            </h2>
          </view>
        </view>
        <view class="" slot="body">
          <view>
            <view style="padding-bottom: 20rpx;display: flex;align-items: center">

              特殊贡献奖距离达成，完成单量还差 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">
              {{ calculateFunc(salaryInfo.contributeAmountThreshold,salaryInfo.amount) }}单</text>
            </view>
            <u-line-progress :active-color="calculateFunc3(salaryInfo.contributeAmountThreshold,salaryInfo.amount)" :striped="true" :percent="calculateFunc2(salaryInfo.contributeAmountThreshold,salaryInfo.amount)" :striped-active="true" ></u-line-progress>
          </view>
          <view>
            <view style="padding: 20rpx 0;display: flex;align-items: center">
              距离月末还有 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ daysUntilEndOfMonth(1) }}天</text>
            </view>
            <u-line-progress :active-color="calculateFunc3(daysUntilEndOfMonth(2),daysUntilEndOfMonth(3))" :striped="true" :percent="calculateFunc2(daysUntilEndOfMonth(2),daysUntilEndOfMonth(3))" :striped-active="true" ></u-line-progress>
          </view>
          <view>
            <view style="padding: 20rpx 0;display: flex;align-items: center">
              接下来日均要完成 <text style="color: #fa3534;font-size: 36rpx; font-weight:550;padding-left:10rpx;">{{ Math.round(calculateFunc(salaryInfo.contributeAmountThreshold,salaryInfo.amount)/daysUntilEndOfMonth(1)) }}单</text>
            </view>
          </view>
        </view>
      </u-card>
    </view>
    <u-modal v-model="show" :title-style="{color: 'red'}" :title="'测试环境请手动输入骑手ID'" :show-cancel-button="false" @confirm="confirm()">
      <view class="slot-content">
        <view style="height: 200rpx;display: flex;align-items: center;padding: 30rpx">
          <u-input v-model="value" :type="'text'" :border="true" />
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import {getQueryString} from "@/utils/index.js";
import store from "@/store";
import * as consts from "@/utils/constant.js";
import {isEmpty} from "../../utils";
export default {
  name: "salary-webIndex",
  data() {
    return {
      isback:false,
      show:false,
      value:'',
      title: '薪资达成进度',
      proxyUrl:(window.location.href.includes('/xsdcrm-wechat-ui/')?'/xsdcrm-wechat-ui/': ''),
      salaryInfo:{},
      riderId:'',
      urlRiderId:'',
      riderRoster:uni.getStorageSync("riderRoster")

    };
  },
  onLoad(option){
    let code = getQueryString("code");
    if (option.isWeChat == '1') {
      let appId = window.location.href.includes('/xsdcrm-wechat-ui/')?'wxa25549b952d4e61b':'wxe0ee816af068f3a4';
      let redirect_url = encodeURIComponent(`https://crm.xinlanrenli.com/xsdcrm-wechat-ui/#/pages/user/salary-webIndex?riderId=${option.riderId}`);
      let get_code_url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirect_url}&response_type=code&scope=${consts.SCOPE}&state=STATE&connect_redirect=1&#wechat_redirect`; //微信网页授权获取code
      window.location.href = get_code_url;
      return
    }

    if (option.riderId) {
      this.urlRiderId = option.riderId
    }

    if (!isEmpty(code) && isEmpty(store.getters.openId)) {
      this.toLogin()
      return
    }

    if (!window.location.href.includes('/xsdcrm-wechat-ui/')){
      this.show = true
      return
    }
    this.riderId = this.riderRoster.riderId
    this.init()

  },
  methods:{
    async toLogin() {
      let code = getQueryString("code");
      await this.$api.user
        .withoutLoginZs({
          code,
        })
        .then(async (res) => {
          let {data} = res;
          if (data) {
            //成功
            data.openid && store.commit("UPDATE_OPENID", data.openid);
            uni.setStorageSync("token", data.token);
            uni.setStorageSync("token2", data.token);
            uni.setStorageSync("openId", data.openid);
            let openId = uni.getStorageSync('openId')
            let res2 = await this.$api.dormitory.selectWxUserByOpenId(openId,3)
            if (!isEmpty(res2.data.riderRoster)){
              uni.setStorageSync("riderRoster",res2.data.riderRoster)
              this.riderRoster = res2.data.riderRoster
              document.getElementsByClassName('u-back-wrap')[0].style.display= 'none'
              if (!window.location.href.includes('/xsdcrm-wechat-ui/')){
                this.show = true
                return
              }
              this.isback = false;
              if (isEmpty(this.riderRoster.riderId)) {
                this.riderId = this.urlRiderId
                this.init()
                return
              }
              this.riderId = this.riderRoster.riderId;
              this.init()
            }

          } else {
            //失败
            uni.showToast({
              title: data.msg,
              icon: "none",
            })
          }
        })
    },
    confirm() {
      this.riderId =  this.value
      this.init()
    },
    async init() {
      uni.showLoading({
        title: '加载中',
        mask: true,
      });
      let data = await this.$api.dormitory.storeRiderId(this.riderId)
      this.salaryInfo = data
      if (data.calculateDate) {
        this.title = `薪资达成进度(截止至${data.calculateDate})`
      }

      let quest = {
        operName:this.riderRoster.idCardName,
        deptName:this.riderRoster.deptName,
        riderId:this.riderRoster.riderId,
        openid:uni.getStorageSync('openId')
      }
      await this.$api.dormitory.viewLogRiderId(quest)

      uni.hideLoading();
    },
    toSalatyChildren(e,title) {
      uni.navigateTo({
        url: `/pages/user/salary-children/webIndex?type=${e}&title=${title}&riderId=${this.riderId}`
      })
    },
    calculateFunc(v1,v2,f){
      let num = Number(v1?v1:0) - Number(v2?v2:0)
      return num<0?0:num
    },
    calculateFunc2(v1,v2){
      let n = (Number(v2?v2:0)/Number(v1?v1:0))
      let num = ((Number.isNaN(n) ? 0 : n).toFixed(2))*100
      return  num>100?100:Math.round(num)
    },
    calculateFunc3(v1,v2){
      let n = (Number(v2?v2:0)/Number(v1?v1:0))
      let num = ((Number.isNaN(n) ? 0 : n).toFixed(2))*100
      return  num>=100?'#19be6b':'#2979ff'
    },
    daysUntilEndOfMonth(e) {
      // 获取当前日期
      const today = new Date();
      // 获取当前月份和年份
      const year = today.getFullYear();
      const month = today.getMonth(); // 月份是从0开始的，所以1月是0, 2月是1, 以此类推
      // 创建一个表示下一个月的日期对象
      const nextMonth = month + 1;
      const nextMonthFirstDay = new Date(year, nextMonth, 1);
      // 计算本月最后一天的日期
      const endOfMonth = new Date(nextMonthFirstDay - 1);
      // 计算天数差
      const daysUntilEnd = Math.ceil((endOfMonth - today) / (1000 * 60 * 60 * 24));
      // 获取本月最后一天的日期中的“日期”部分，即为本月总天数
      const daysInCurrentMonth = endOfMonth.getDate();
      // 获取当前日期中的“日期”部分，即为今天是本月的第几天
      const dayOfMonth = today.getDate();
      return e==1?daysUntilEnd:e==2?daysInCurrentMonth:dayOfMonth;
    }
  }
}
</script>

<style scoped lang="scss">
.u-card-wrap {
  background-color: $u-bg-color;
  padding: 1px;
}

/deep/.u-card__head{
  padding: 20rpx 30rpx!important;
}

.u-body-item {
  font-size: 32rpx;
  color: #333;
  padding: 20rpx 10rpx;
}

.u-body-item image {
  width: 120rpx;
  flex: 0 0 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-left: 12rpx;
}
.salary-box{
  height: 100vh;
  background: #f5f5f5;
  overflow: auto;
  //padding: 30rpx;
}

.salary-box-inner-item{
  width: 100%;
  height: 500rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  background: #FFFFFF;
}
/deep/.u-navbar-content-title{
  width:100% !important;
  left:0 !important;
  right:0 !important;
}
/deep/.u-title{
  white-space: nowrap;
  text-overflow:hidden;
}
</style>
